<script setup lang="ts"> // 加上setup标识，能简化组合式api写法,lang="ts"表示所写代码是基于ts强类型
  import {ref } from 'vue';
  import type {Ref} from 'vue' // 导入数据类型
  // 简化写法：
  // 简化写法只需要写以前的setup(){}里面的，也不需要写最后的return



/* 
  ref函数，定义响应式数据
  引用ref声明的变量，访问值需要.value，因为通过ref声明的变量是个对象
*/
  let name = ref("张三");
  const age:Ref<number> = ref(18);  // ts指定age为number类型
  const salary = ref<number>(200);
  function change() {
      name.value = "李四";
      age.value = 20  // 代码中使用需要.value
  }
  console.log(name);  // 这个name是个RefImpl对象



/* 
  利用接口来约束对象类型
*/
interface User {
  id: number;
  name: string;
}

const user = ref<User>({
  id: 1,
  name: 'zhangsan'
})
console.log(user);
</script>

<template>
   <h1>姓名: {{ name }}</h1> <!--模板中使用不需要.value -->
   <h1>年龄: {{ age }}</h1>
   <button @click="change">点我更改信息</button>

   <h2>{{ salary }}</h2>
   <h2>{{ user.id }}</h2>
</template>

<style scoped>

</style>
